import type { FormInstance } from 'element-plus'
import type { UserInfoType } from '~/store/user.typings'
import type {
  AssetHomeStateType,
  AssetHomePatternDataType /* AssetHomeAreaType */
} from './typings'
import type { AssetHomeMarkerData } from '../components/map/typings'
// import type { PopoverInfoDataType } from '../components/assetHomeComponents/typings'
import { defineComponent, ref, reactive, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { keys, uniqWith } from 'lodash'
import {
  ElCard,
  ElRow,
  ElCol,
  ElLink,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElEmpty,
  ElScrollbar,
  ElSpace,
  ElAlert,
  ElDivider,
  ElImage,
  ElIcon,
  ElTooltip,
  ElMessage
} from 'element-plus'
import { ArrowDownBold, ArrowUpBold, Plus, Minus } from '@element-plus/icons-vue'
import SaasTitle from '~/components/SaasTitle'
import AliIcon from '~/components/AliIocn'
import AssetHomeMap from '../components/map/AssetHomeMap'
// import AreaInfoPopover from '../components/assetHomeComponents/AreaInfoPopover'
import PowerDistributionFacilitiesPopover from '../components/assetHomeComponents/PowerDistributionFacilitiesPopover'
import LightPolePopover from '../components/assetHomeComponents/LightPolePopover'
import LampPopover from '../components/assetHomeComponents/LampPopover'
import FacilityLoopsInfoPopover from '../components/assetHomeComponents/FacilityLoopsInfoPopover'
import { handleTrim } from '~/utils/util'
import { EL_SPACE_SIZE_SECOND_GEAR } from '~/utils/const'
import styles from './../index.module.scss'

export default defineComponent(function AssetHome() {
  const store = useStore()
  const assetHomeMapRef = ref()
  const ruleFormRef = ref<FormInstance>()
  const state = reactive<AssetHomeStateType>({
    expand: false,
    activeAreaIds: [],
    areaList: [],
    graphicExampleExpand: false,
    // areaInfoVisible: false
    activeOptionsBarCode: []
  })

  // 根据按键判定是否根据关键字搜索区域
  const handleSearchAreaListByAreaName = async (e: Event | KeyboardEvent) => {
    if ((e as KeyboardEvent).key !== 'Enter') return
    handleGetWorkAreaList(handleTrim(state.areaName!))
  }

  // 获取区域展示列表
  const handleGetWorkAreaList = async (name?: string) => {
    const res = await store.dispatch('assetHome/GetAssetHomeWorkAreaList', { name })
    state.areaList = res?.data || []
    let minScale: number, maxScale: number
    if (
      state.areaList?.length &&
      state.patternData &&
      state.patternData!?.[state.areaList[0].moduleId]?.modelConfigDataVO?.base?.maxScale
    ) {
      minScale = state.patternData!?.[state.areaList[0].moduleId]?.modelConfigDataVO?.base?.minScale
      maxScale =
        Math.floor(
          state.patternData!?.[state.areaList[0].moduleId]?.modelConfigDataVO?.base?.maxScale
        ) + 0.9
    }

    // 生成区域
    const areaIds = state.areaList?.map((item) => {
      if (item?.phase) {
        const phase = JSON.parse(item?.phase)
        assetHomeMapRef.value.renderWorkAreaPolygon({
          ...item,
          phaseType: phase?.type || '',
          coordinates: phase?.coordinates || [],
          minZoom: minScale,
          maxZoom: maxScale
        })
      }

      return item.id
    })
    // 默认展示第一个搜索到的数据
    if (areaIds?.length && name) {
      handleChangeActiveAreaIndexs(areaIds[0])
    }
    // 切换展示以搜索到的区域面
    assetHomeMapRef.value?.showAreaPolygonByAreaId?.(areaIds)
  }

  // 查询租户专题图(按钮操作栏)
  const handleGetOptionsBar = async () => {
    const res = await store.dispatch('assetHome/GetAssetHomeOptionsBar')
    state.optionsBar = res?.data || []
    if (state?.optionsBar?.length)
      state.moduleId = state.optionsBar
        ?.filter((item) => item?.code !== 'DistributionLoop')
        ?.find((item) => item?.code === 'Distribution')?.id
    // 初始化的时候给予默认选中效果
    state.activeOptionsBar = state.optionsBar?.map((item) => item?.id)
    state.activeOptionsBarCode = state.optionsBar?.map((item) => item?.code)
  }

  // 获取当前页面初始化所需要的地图数据
  const handleGetInitMapData = async () => {
    const res = await store.dispatch('assetHome/GetAssetHomeMapSpecialTenant')
    state.patternData = res?.data?.specialDetailVOS?.reduce(
      (patternData: AssetHomeStateType['patternData'], item: AssetHomePatternDataType) => {
        if (item.assetModuleId) patternData![item.assetModuleId] = item
        return patternData
      },
      {}
    )
    state.cityName = res?.data?.city
    if (res?.data) {
      // 设置地图属性
      assetHomeMapRef.value.setMapInfo(res?.data)
    } else {
      handleGetMapZoom()
    }
    await handleGetWorkAreaList()
    await assetHomeMapRef.value.searchMapMarker()

    // 生成所需要的坐标点icon
    assetHomeMapRef.value?.generateMarkerIcon?.(state.optionsBar)
  }

  // 修改区域列表展开状态
  const handleChangeAreaListExpand = () => {
    state.expand = !state.expand
  }

  // 修改选中区域索引数组
  const handleChangeActiveAreaIndexs = (id: string) => {
    // 如果有上一个 则将上一个取消选中
    if (state.activeAreaIds?.length) {
      assetHomeMapRef.value.toggleWorkAreaPolygonVisible(state.activeAreaIds[0], false)
    }
    state.activeAreaIds = [id]
    assetHomeMapRef.value.toggleWorkAreaPolygonVisible(id, true)
    // if (state.activeAreaIds.includes(id)) {
    //   state.activeAreaIds = state.activeAreaIds.filter((item) => id !== item)
    //   assetHomeMapRef.value.toggleWorkAreaPolygonVisible(id, false)
    // } else {
    //   state.activeAreaIds.push(id)
    //   assetHomeMapRef.value.toggleWorkAreaPolygonVisible(id, true)
    // }
  }

  // 修改图例card是否展开
  const handleChangeGraphicExampleExpand = () => {
    state.graphicExampleExpand = !state.graphicExampleExpand
  }

  // 配电名称查询
  const handleSearchPowerDistributionFacilitie = (e: Event | KeyboardEvent) => {
    if ((e as KeyboardEvent).key !== 'Enter') return

    handleSearchEquipmentInformation()
  }

  // 查询根据名称和moduleId查询对应的设备
  const handleSearchEquipmentInformation = () => {
    if (!handleTrim(state.distributionName!)) {
      assetHomeMapRef.value.clearEquipmentPoint()
      return
    }

    if (state.distributionName!?.length < 2) {
      ElMessage.error('关键字输入太少，无法匹配到有效数据')
      return
    }

    ruleFormRef.value!.validateField(['distributionName'], async (isValid) => {
      if (!isValid) return
      const res = await store.dispatch('assetHome/GetAssetHomePowerDistributionFacilities', {
        moduleId: state.moduleId,
        keyword: handleTrim(state.distributionName!)
      })
      // 如果查到数据则将目前地图的中心点定位到默认的第一个配电设施坐标位置
      if (res?.data?.length) {
        // const firstDataParse = JSON.parse(res?.data[0]?.phase)
        // if (firstDataParse.coordinates?.length) {
        //   assetHomeMapRef.value.map.setCenter(firstDataParse.coordinates, false, 0)
        // }
        assetHomeMapRef.value.drawEquipmentPoint(res?.data)
      } else {
        ElMessage.warning('未匹配到数据')
        assetHomeMapRef.value.drawEquipmentPoint([])
      }
    })
  }

  // 地址查询
  const handleSearchAddressForMap = (value: string) => {
    const placeSearch = new assetHomeMapRef.value.aMap.PlaceSearch({
      city: state.cityName,
      citylimit: false
      // map: assetHomeMapRef.value.map
    }) // 构造地点查询类
    placeSearch.search(value, (status: string, result: Record<string, any>) => {
      state.addressList =
        status === 'complete' && result.info === 'OK'
          ? uniqWith(
              result.poiList.pois,
              (item: { name: string }, nextItem: { name: string }) => item.name === nextItem.name
            )
          : []
    })
  }

  // 根据选中的地址
  const handleChangeActiveAddress = (value: string) => {
    if (!value) {
      // assetHomeMapRef.value.restCenter()
      state?.seachAddressMarker?.hide()
      return
    }
    const findItem = state.addressList!.find((item) => item.name === value)
    if (findItem?.location) {
      assetHomeMapRef.value.map.setCenter([findItem.location.lng, findItem.location.lat], false, 0)
      assetHomeMapRef.value.searchMapMarker()

      // 设置搜索点
      if (state?.seachAddressMarker) {
        state?.seachAddressMarker.setPosition([findItem.location.lng, findItem.location.lat])
        state?.seachAddressMarker.show()
      } else {
        state.seachAddressMarker = new assetHomeMapRef.value.aMap.Marker({
          title: findItem?.name,
          map: assetHomeMapRef.value.map,
          icon: assetHomeMapRef.value.amapIcon,
          position: [findItem.location.lng, findItem.location.lat],
          offset: [-12, -22]
        })
      }
    }
  }

  // 切换选中的操作栏项
  const handleChangeActiveOptionsBar = (row: any) => {
    if (state.activeOptionsBarCode?.includes(row.code)) {
      state.activeOptionsBarCode = state.activeOptionsBarCode.filter((item) => item !== row.code)
    } else {
      state.activeOptionsBarCode?.push(row.code)
    }
    if (state.activeOptionsBar?.includes(row.id)) {
      state.activeOptionsBar = state.activeOptionsBar.filter((item) => item !== row.id)
    } else {
      state.activeOptionsBar?.push(row.id)
    }
    // 每次变更完选中的操作栏项会去再查一遍页面需要展示的点和线
    const timer = setTimeout(() => {
      assetHomeMapRef.value.searchMapMarker()
      // 清理定时器  增加定时器原因是因为值的更新速度没有查询快
      clearTimeout(timer)
    }, 0)
  }

  // 切换区域详情弹框展示
  // const handleChangeAreaInfoView = (
  //   left: number,
  //   top: number,
  //   areaInfo: AssetHomeAreaType,
  //   popoverInfo: PopoverInfoDataType
  // ) => {
  //   // 如果已有则清空数据取消展示
  //   if (state.areaInfoVisible && popoverInfo === undefined) {
  //     state.areaInfoVisible = false
  //     state.areaInfo = undefined
  //     return
  //   }
  //   // 如果没有则展示数据
  //   state.areaInfoVisible = true
  //   state.areaInfo = {
  //     left,
  //     top,
  //     areaInfo,
  //     popoverInfo
  //   }
  // }

  // 切换区域详情弹框位置
  // const handleChangeAreaInfoPosition = (left: number, top: number) => {
  //   if (!state.areaInfo) return
  //   state.areaInfo!.left = left
  //   state.areaInfo!.top = top
  // }

  // 关闭区域信息弹框
  // const handleCancelAreaInfoPopover = () => {
  //   assetHomeMapRef.value.clearActiveMarkerEvent()
  // }

  // 切换配电设施 监控箱 灯 灯杆详情展示
  const handleChangePatternMarkerInfoView = (
    left: number,
    top: number,
    type: AssetHomeStateType['patternMarkerType'],
    info: AssetHomeStateType['patternMarkerInfo'],
    pointList: AssetHomeMarkerData[]
  ) => {
    state.patternMarkerType = type
    state.patternMarkerInfo = info
      ? {
          popoverInfo: info,
          left,
          top,
          pointList
        }
      : undefined
  }

  // 更新配电设施 灯 灯杆 弹框位置
  const handleChangePatternMarkerInfoPosition = (left: number, top: number) => {
    if (!state.patternMarkerInfo) return
    state.patternMarkerInfo!.left = left
    state.patternMarkerInfo!.top = top
  }

  // 切换回路详情弹框
  const handleChangePatterPolylineInfoView = (
    left: number,
    top: number,
    name: string,
    loopList: AssetHomeStateType['patternMarkerInfo'],
    activeLoopIds: string[]
  ) => {
    state.patternMarkerType = name ? 'loop' : undefined
    state.patternMarkerInfo = loopList
      ? {
          left,
          top,
          name,
          loopList,
          activeLoopIds
        }
      : undefined
  }

  // 关闭配电设施 灯 灯杆弹框
  const handleCancelPatternMarkerPopover = () => {
    state.patternMarkerType = undefined
    state.patternMarkerInfo = undefined
    assetHomeMapRef.value.clearActiveMarkerEvent()
  }

  // 切换位于同一个坐标的灯灯杆等选中项
  const handleChangeActivePatternMarkerInfo = async (
    record: AssetHomeStateType['patternMarkerInfo']
  ) => {
    if (record?.id !== state.patternMarkerInfo?.info?.id)
      assetHomeMapRef.value.changeActivePatternMarker(record)
    const res = await assetHomeMapRef.value.getPatterMarkerInfo(record)
    state.patternMarkerType = res.markerType
    state.patternMarkerInfo!.popoverInfo = res.data
  }

  // 切换回路选中项
  const handleChangeActiveLoopIds = (ids: string[]) => {
    if (state.patternMarkerInfo?.activeLoopIds) {
      state.patternMarkerInfo.activeLoopIds = assetHomeMapRef.value.changeActivePatternPolyline(ids)
    }
  }

  // 获取当前地图层级并赋值
  const handleGetMapZoom = () => {
    state.mapZoom = Math.round(assetHomeMapRef.value.map.getZoom())
  }

  // 切换当前地图层级
  const handleClickChangeMapZoom = async (type: '+' | '-') => {
    let zooms = Math.round(assetHomeMapRef.value.map.getZoom())
    if (type === '+') {
      zooms++
    } else {
      zooms--
    }
    await assetHomeMapRef.value.map.setZoom(zooms)
  }

  onMounted(() => {
    // handleGetWorkAreaList()
    handleGetOptionsBar()
    // 获取投运状态下拉列表
    store.dispatch('powerDistributionFacilities/GetOperationStatusSelectList')
    // 获取设备类别下拉列表
    store.dispatch('powerDistributionFacilities/GetDistributiontTypeSelectList')
    // 获取所属区域下拉列表
    store.dispatch('assetWorkArea/GetWorkAreaSelectListByUser')
    // 灯杆类型 下拉列表
    store.dispatch('assetLampPost/GetNodeByParentCode')
    // 灯具类型 下拉列表
    store.dispatch('assetLampBase/GetNodeByParentCode')
    // handleGetInitMapData()
  })

  const { value: userInfo } = computed<UserInfoType>(() => store.getters['user/userInfo'])

  return () => {
    // eslint-disable-next-line no-constant-condition
    if (userInfo.homeUrl) {
      return (
        <div>
          <iframe
            style="width: 100%; height: 100vh;"
            frameborder="0"
            src="http://re.sit.dataease.guoxintianyu.com/de-api/link/EySgnEok"
          ></iframe>
        </div>
      )
    }
    return (
      <section class={styles['asset-home-box']}>
        <AssetHomeMap
          ref={assetHomeMapRef}
          id={styles['asset-home-map']}
          initCallback={handleGetInitMapData}
          patternData={state.patternData}
          activeModules={state.activeOptionsBar}
          // areaInfoVisible={state.areaInfoVisible}
          patternMarkerType={state.patternMarkerType}
          getMapZoom={handleGetMapZoom}
          // onChangeAreaInfoView={handleChangeAreaInfoView}
          // onChangeAreaInfoPosition={handleChangeAreaInfoPosition}
          onChangePatterMarkerInfoView={handleChangePatternMarkerInfoView}
          onChangePatterMarkerInfoPosition={handleChangePatternMarkerInfoPosition}
          onChangePatterPolylineInfoView={handleChangePatterPolylineInfoView}
          activeOptionsBar={state.activeOptionsBarCode}
        />
        {/* 区域列表 */}
        <ElCard
          class={{
            [styles['asset-home-area-card']]: true,
            [styles['asset-home-area-card-has-content']]: state.expand
          }}
          // v-slots={{
          //   header: () =>
          // }}
        >
          {state.expand ? (
            <ElRow class={styles['asset-home-area-card-title']}>
              <ElCol span={18}>
                <SaasTitle type="primary">区域列表（{state.areaList?.length}）</SaasTitle>
              </ElCol>
              <ElCol span={6} {...{ align: 'right' }}>
                <ElLink type="primary" underline={false} onClick={handleChangeAreaListExpand}>
                  <AliIcon type="icon-qiehuanliebiao" />
                </ElLink>
              </ElCol>
            </ElRow>
          ) : (
            <ElLink
              class={styles['asset-home-area-card-expand']}
              type="primary"
              underline={false}
              onClick={handleChangeAreaListExpand}
            >
              <AliIcon type="icon-qiehuanliebiao" />
            </ElLink>
          )}
          {state.expand && (
            <>
              <ElInput
                v-model={state.areaName}
                placeholder="区域名称"
                prefixIcon={<AliIcon type="icon-sousuo" />}
                clearable
                onKeydown={handleSearchAreaListByAreaName}
                onClear={handleGetWorkAreaList}
              />
              {state.areaList?.length ? (
                <ElScrollbar class={styles['asset-home-area-scrollbar']} height="100%">
                  <ElSpace wrap fill class="asset-home-area-space">
                    {state.areaList?.map((item) => (
                      <ElTooltip content={item.name}>
                        <ElAlert
                          class={
                            state.activeAreaIds.includes(item.id)
                              ? styles['asset-home-area-alert-primary']
                              : styles['asset-home-area-alert-info']
                          }
                          closable={false}
                          v-slots={{
                            title: () => (
                              <section
                                class={{
                                  'text-one-line-overflow': true,
                                  [styles['asset-home-area-alert-title']]: true
                                }}
                              >
                                {item.name}
                              </section>
                            )
                          }}
                          {...{ onClick: () => handleChangeActiveAreaIndexs(item.id) }}
                        />
                      </ElTooltip>
                    ))}
                  </ElSpace>
                </ElScrollbar>
              ) : (
                <ElEmpty description="未匹配到数据" />
              )}
            </>
          )}
        </ElCard>
        {/* 搜索栏 */}
        <section
          class={{
            [styles['asset-home-area-search-bar']]: true,
            [styles['asset-home-area-search-bar-collapse']]: !state.expand
          }}
        >
          <ElForm
            class={styles['asset-home-area-search-bar-form']}
            ref={ruleFormRef}
            model={{ distributionName: state.distributionName, address: state.address }}
          >
            {!!state?.optionsBar?.length && (
              <ElFormItem
                class={styles['asset-home-area-search-bar-form-moduleId-item']}
                prop="moduleId"
              >
                <ElSelect v-model={state.moduleId} onChange={handleSearchEquipmentInformation}>
                  {state.optionsBar?.map(
                    (item) =>
                      item?.code !== 'DistributionLoop' && (
                        <ElOption key={item?.id} value={item?.id} label={item?.name} />
                      )
                  )}
                </ElSelect>
              </ElFormItem>
            )}
            <ElFormItem
              class={styles['asset-home-area-search-bar-form-item']}
              prop="distributionName"
              // rules={[
              //   {
              //     min: 3,
              //     message: '设施名称 3 ~ 20 字符回车搜索'
              //   }
              // ]}
            >
              <ElInput
                v-model={state.distributionName}
                clearable
                placeholder="设施名称 2～20字符回车搜索"
                prefixIcon={<AliIcon type="icon-sousuo" />}
                onKeydown={handleSearchPowerDistributionFacilitie}
                onClear={handleSearchEquipmentInformation}
              />
            </ElFormItem>
            <ElFormItem class={styles['asset-home-area-search-bar-form-item']} prop="address">
              <ElSelect
                v-model={state.address}
                placeholder="地址搜索"
                filterable
                remote
                defaultFirstOption
                clearable
                remoteMethod={handleSearchAddressForMap}
                onChange={handleChangeActiveAddress}
                v-slots={{
                  prefix: () => <AliIcon type="icon-sousuo" />
                }}
              >
                {state.addressList?.map((item) => (
                  <ElOption class={styles['search-address-option']} value={item?.name}>
                    {item?.name}
                    <section class={styles['search-address-option-info']}>
                      地址：{item?.address}
                    </section>
                  </ElOption>
                ))}
              </ElSelect>
            </ElFormItem>
          </ElForm>
        </section>
        {/* 按钮操作栏 */}
        {!!state.optionsBar?.length && (
          <ElCard
            class={{
              [styles['asset-home-area-options-bar']]: true,
              [styles['asset-home-area-options-bar-collapse']]: !state.expand
            }}
          >
            <ElSpace spacer={<ElDivider direction="vertical" />}>
              {/* 操作栏 */}
              {state.optionsBar?.map((item) => (
                <ElLink
                  style={{ display: 'block' }}
                  underline={false}
                  onClick={() => handleChangeActiveOptionsBar(item)}
                >
                  <ElTooltip effect="light" placement="top" content={item?.name}>
                    <ElImage
                      class={styles['asset-home-area-options-bar-icon']}
                      src={
                        state.activeOptionsBarCode?.includes(item.code)
                          ? item.iconUrl
                          : item.greyIconUrl
                      }
                    />
                  </ElTooltip>
                </ElLink>
              ))}
            </ElSpace>
          </ElCard>
        )}
        {/* 控制放大缩小 */}
        <ElSpace
          direction="vertical"
          class={{
            [styles['asset-home-zoom']]: true,
            [styles['asset-home-zoom-expand']]: state.graphicExampleExpand
          }}
        >
          <ElCard class="zoom-number-card">{state.mapZoom}</ElCard>
          <ElCard class="zoom-option-card">
            <ElSpace direction="vertical" spacer={<ElDivider />}>
              <ElLink underline={false} icon={Plus} onClick={() => handleClickChangeMapZoom('+')} />
              <ElLink
                underline={false}
                icon={Minus}
                onClick={() => handleClickChangeMapZoom('-')}
              />
            </ElSpace>
          </ElCard>
        </ElSpace>
        {/* 图例展示栏 */}
        <ElCard
          class={{
            [styles['asset-home-graphic-example']]: true,
            [styles['asset-home-graphic-example-packUp']]: !state.graphicExampleExpand
          }}
          v-slots={{
            header: () => (
              <ElRow>
                <ElCol span={12}>
                  <SaasTitle type="primary">图例</SaasTitle>
                </ElCol>
                <ElCol span={12} {...{ align: 'right' }}>
                  <ElLink underline={false} onClick={handleChangeGraphicExampleExpand}>
                    <ElIcon>
                      {state.graphicExampleExpand ? <ArrowDownBold /> : <ArrowUpBold />}
                    </ElIcon>
                  </ElLink>
                </ElCol>
              </ElRow>
            )
          }}
        >
          <ElScrollbar height={327}>
            <ElSpace direction="vertical" fill size={EL_SPACE_SIZE_SECOND_GEAR}>
              {keys(state.patternData || {})
                ?.map((key: string) =>
                  state.patternData?.[key]?.modelConfigDataVO?.base?.legend
                    ? state.patternData?.[key]?.modelConfigDataVO?.renderer?.categoryList?.map(
                        (item) => (
                          <ElTooltip
                            content={`${state.patternData![key].assetModuleName}（${item.value}）`}
                          >
                            <ElSpace>
                              {/* 区域渲染 */}
                              {state.patternData?.[key]?.assetModuleCode === 'WorkArea' && (
                                <AliIcon
                                  class={styles['asset-home-graphic-example-icon']}
                                  type="icon-gongqu"
                                  color={item.color}
                                />
                              )}
                              {/* 回路渲染 */}
                              {state.patternData?.[key]?.assetModuleCode === 'DistributionLoop' && (
                                <AliIcon
                                  class={styles['asset-home-graphic-example-icon']}
                                  type="icon-huilu"
                                  color={item.color}
                                />
                              )}
                              {/* 非区域和非回路渲染 */}
                              {state.patternData?.[key]?.assetModuleCode !== 'WorkArea' &&
                                state.patternData?.[key]?.assetModuleCode !==
                                  'DistributionLoop' && (
                                  <ElImage
                                    class={styles['asset-home-graphic-example-icon']}
                                    // style={{
                                    //   width: `${item.iconWidth}px`,
                                    //   height: `${item.iconLength}px`
                                    // }}
                                    src={item.iconImage}
                                  />
                                )}
                              <section class="text-one-line-overflow">
                                {state.patternData![key].assetModuleName}（{item.value}）
                              </section>
                            </ElSpace>
                          </ElTooltip>
                        )
                      )
                    : []
                )
                .flat()}
            </ElSpace>
          </ElScrollbar>
        </ElCard>
        {/* 区域信息弹框 */}
        {/* {state.areaInfoVisible && (
        <AreaInfoPopover {...(state.areaInfo || {})} onCancel={handleCancelAreaInfoPopover} />
      )} */}
        {/* 配电设施信息弹框 */}
        {state.patternMarkerType === 'facility' && (
          <PowerDistributionFacilitiesPopover
            {...(state.patternMarkerInfo || {})}
            onCancel={handleCancelPatternMarkerPopover}
            changeActivePatternMarker={handleChangeActivePatternMarkerInfo}
          />
        )}
        {/* 灯杆信息弹框 */}
        {state.patternMarkerType === 'lightPole' && (
          <LightPolePopover
            {...(state.patternMarkerInfo || {})}
            onCancel={handleCancelPatternMarkerPopover}
            changeActivePatternMarker={handleChangeActivePatternMarkerInfo}
          />
        )}
        {/* 灯信息弹框 */}
        {state.patternMarkerType === 'lamp' && (
          <LampPopover
            {...(state.patternMarkerInfo || {})}
            onCancel={handleCancelPatternMarkerPopover}
            changeActivePatternMarker={handleChangeActivePatternMarkerInfo}
          />
        )}
        {/* 回路信息弹框 */}
        {state.patternMarkerType === 'loop' && (
          <FacilityLoopsInfoPopover
            {...(state.patternMarkerInfo || {})}
            onCancel={handleCancelPatternMarkerPopover}
            onChangeActiveLoopIds={handleChangeActiveLoopIds}
          />
        )}
      </section>
    )
  }
})
